<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>模板列表</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
	<script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
        body{
            background: #fff;
        }
        .m-tpList {

        }
        .m-tpList .template_list {
        background: #fff;
        padding: 0 0.35rem;
        margin-top: 0.2rem;
        }
        .m-tpList .template_list li {
        background: #FAFAFA;
        border-radius: 0.08rem;
        padding: 0.35rem 0.4rem;
        margin-bottom: 0.35rem;
        }
        .m-tpList .template_list li:nth-last-child(1) {
        margin-bottom: 0;
        }
        .m-tpList .template_list li .icon {
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 50%;
        float: left;
        }
        .m-tpList .template_list li .info {
        float: left;
        width: calc(100% - 0.18rem - 1.2rem);
        padding-left: 0.35rem;
        padding-right: 0.3rem;
        }
        .m-tpList .template_list li .info h3 {
        font-weight: normal;
        font-size: 0.31rem;
        color: #2F2F2F;
        line-height: 1.2rem;
        }
        .m-tpList .template_list li .info span {
        font-size: 0.27rem;
        color: #999999;
        height: 0.5rem;
        line-height: 0.5rem;
        display: block;
        margin-top: 0.15rem;
        font-weight: 300;
        }
        .m-tpList .template_list li .right {
        width: 0.18rem;
        float: right;
        height: 0.35rem;
        margin-top: calc((1.2rem - 0.35rem) / 2);
        }
        .m-tpList .template_list li .more {
        height: 0.4rem;
        margin-top: calc((1.2rem - 0.4rem) / 2);
        }
    </style>
</head>
<body>
	<div id="app" v-cloak>
		<div class="m-tpList" v-if="templateList != null">
			<ul class="template_list">
				<li class="clearfix"
					v-for="(templateItem,templateIndex) of templateList"
					:key="templateItem.id"
					@click="useTemplate(templateItem)"
				>
					<img :src="templateItem.icon" class="icon" />
					<div class="info">
						<h3 class="ell">{{templateItem.name}}</h3>
					</div>
					<img src="../../../image/push/right.png" class="right" />
				</li>
			</ul>
        </div>
        <template v-else>
            <div class="loadFull whiteBg">
                <div class="se-loading"></div>
            </div>
        </template>
	</div>
	<script type="text/javascript">
		apiready = function() {
			var app = new Vue({
				el:'#app',
				data:{
					templateList: null,
					iosTest:false,
				},
				created() {
					this.getTemplateApi();
				},
				methods:{
					getPageParam: function() {
						return api.pageParam;
					},
					/**
					 *  获取模版
					 */
					getTemplateApi: function () {
						let params = this.getPageParam().data;
						let data = {
							tp_id: params.tpId,
							tpl_type: params.tpType,
							page: 1
						};
						let _self = this;
						$.comRequest('get','/task/template/query_my_by_project',data,function(res){
							let records  = res.data.records;
							_self.templateList = records;
						},function(ero){
							$.toast(ero.message);
						});
					},
					useTemplate: function(template) {
						api.sendEvent({
							name: 'userTemplate',
							extra: template
						});
						api.closeWin();
					}
				},
				mounted(){
					$.initJs(this);

				}
			})
		}
	</script>
</body>
</html>